<style>
  select{
    cursor: pointer;
    /*border:none;*/
    color: #aaaaaa;
    height: 100%;
    width:85px;
    z-index: 2;
  }
  select:nth-of-type(2){ margin: 0 5px; }
  .icon-triangle{ margin-left:-20px; z-index: 0;}
  .black-text{ color: #000;}
  .pbody>div{ border-bottom: 1px solid #eee; line-height: 53px;}
  .pbody>div:last-of-type{ border:none; }
  [type="radio"] {
    position: absolute;
    left: -9999px;
    opacity: 0;
  }
  label{ height: 100%; width:100%;  padding: 14px 0;}
  label {
    position: relative;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    line-height: 25px;
  }
  label:after{
    border: 2px solid #5a5a5a;
    border-radius: 50%;
    content: '';
    position: absolute;
    right: 0;
    margin: 4px;
    width: 16px;
    height: 16px;
  }
  [type="radio"]:checked+label:after{
    background-color: #26a69a;
    border: 2px solid #26a69a;
  }
</style>
<div class="pheader"><div class="ptitle center font18 white-text">投注站点</div></div>
<div class="pbody white font14" style="color:#bfbfbf;">
  <div class="location-wrapper" style="border-bottom: 1px solid #eee;">
    <select class="prov" id="" title="选择省">
      <!-- <option value="">浙江省</option>
      <option value="">湖南省</option> -->
    </select><i class="icon icon-triangle"></i>
    <select class="city" disabled id="" title="选择市">
      <!-- <option value="">杭州市</option>
      <option value="">长沙市</option> -->
    </select><i class="icon icon-triangle"></i>
    <select class="dist" disabled id="" title="选择区">
      <!-- <option value="">拱墅区</option>
      <option value="">岳麓区</option> -->
    </select><i class="icon icon-triangle"></i>
  </div>
  <div class="">
    <input type="radio" name="dian" class="fr wierd" checked id="a1"></checkbox>
    <label for="a1"><span class="black-text">拱墅区A网点</span><i class="icon icon-location mgL10"></i>1km</label>
  </div>
  <div class="">
    <input type="radio" name="dian" class="fr wierd" id="b1"></checkbox>
    <label for="b1"><span class="black-text">拱墅区B网点</span><i class="icon icon-location mgL10"></i>2km</label>
  </div>
  <div class="">
    <input type="radio" name="dian" class="fr wierd" id="c1"></checkbox>
    <label for="c1"><span class="black-text">拱墅区C网点</span><i class="icon icon-location mgL10"></i>3km</label>
  </div>
  <div class="">
    <input type="radio" name="dian" class="fr wierd" id="d1"></checkbox>
    <label for="d1"><span class="black-text">拱墅区D网点ff</span><i class="icon icon-location mgL10"></i>4km</label>
  </div>

</div>
<div class="pfooter white"><a class="btn-red btn-center" href="javascript:void(0);" id="btnClose">确定</a></div>

<script type="text/javascript" src="../js/jquery.cityselect.js"></script>
<script>
  $(function(){
    $(".location-wrapper").citySelect({
      url: "../js/city.min.js",
      prov:"浙江",
      city:"杭州",
      dist:"拱墅区",
      nodata:"none" //当子集无数据时，隐藏select
    });
  });
</script>
